/*
 * @Description: 测肤数据
 * @Author: kanglin
 * @Date: 2018-08-31 10:12:10
 * @Copyright: Created by Panxsoft.
 */
<style lang="less" scoped rel="stylesheet/less" type="text/less" >
	@import '~src/assets/css/common.less';
    .skinDataChart{
        .label{
            display: inline-block;
            width: 100* @rem-per-px;
            vertical-align: top;
			text-align: center;
			font-size: 20* @rem-per-px;
			line-height: 28 * @rem-per-px;
			color: #414853;
        }
        .chart{
            display: inline-block;
            width: 520* @rem-per-px;
        }
        .chart__item{
            // position: relative;
            height: 20* @rem-per-px;
            background: #F3F3F3;
        }

        .chart__item__percent{
            position: relative;
             height: 20* @rem-per-px;
            //  background: rebeccapurple;
            width: 0;
            transition: 1s ease;
        }
        .chart__item__percent__text{
            position: absolute;
            right: 8* @rem-per-px;
            color: #ffffff;
            line-height: 20* @rem-per-px;
            font-size: 12 * @rem-per-px;
        }

        .chart__item__percent__text.limited{
            transform: translateX(100%);
            // width: 100 * @rem-per-px;
            white-space: nowrap;
            color: #999999;
			right: -8* @rem-per-px;
        }

        .chart__item:nth-child(1) .chart__item__percent{
            background-image: linear-gradient(90deg,rgba(208,244,255,1) 0%,rgba(148,194,252,1) 100%);
        }

        .chart__item:nth-child(2) .chart__item__percent{
            background-image: linear-gradient(90deg,rgba(255,248,208,1) 0%,rgba(252,185,148,1) 100%);
        }

        .chart__item:nth-child(3) .chart__item__percent{
            background-image: linear-gradient(90deg,rgba(255,225,208,1) 0%,rgba(252,148,148,1) 100%);
        }

    }
</style>

<template>
	<div class="skinDataChart">
		<div class="label">
			{{ label }}
		</div>
		<div class="chart">
			<div
				v-for="(item, index) in chart_data"
				:key="index"
				class="chart__item">
				<div
					:style="item.percent_style"
					class="chart__item__percent">
					<span
						:class="{limited: item.is_limited}"
						class="chart__item__percent__text">{{ item.name }}:{{ item.value }}</span>
				</div>
			</div>

		</div>
	</div>
</template>

<script>

const LIMIT = 0.2; // 百分数小于limit时, 字体

export default {
	name: 'SkinDataChart',
	props: {
		label: { // 部位 名称
			type: String,
			required: true,
		},
		data: {
			type: Array,
			required: true,
		},
	},
	data() {
		return {
			chart_data: [],
		};
	},
	watch: {
		data() {
			this.init();
		},
	},
	created() {
		this.init();
	},
	methods: {

		init() {
			this.chart_data = this.data.map(item => Object.assign(item, {
				percent_style: { width: '0%', opacity: 0 },
				is_limited: true,
			}));
			// 设置状态
			this.$nextTick(() => {
				this.setPercentBarsStatus();
			});
		},

		/**
         *  设置百分比条的状态
         * @return {void}
         */
		setPercentBarsStatus() {
			this.chart_data = this.chart_data.map((item) => {
				item.percent_style = { width: this.parseWidth(item.value), opacity: 1 };
				item.is_limited = this.isLimited(item.value);
				return item;
			});
		},

		/**
         *  把字符串转成 宽度 %
         * @param {string} value
         * @return {string} withd
         */
		parseWidth(value) {
			if (!value) {
				return '0%';
			}
			if (this.isPercent(value)) { // 有%号
				return value;
			}
			return `${parseFloat(value) * 10}%`;
		},

		/**
         * width 是否小于 文字长度
         * @param {string} value -进度数据
         * @return {boolean} is_limited
         */
		isLimited(value) {
			if (!value) {
				return true;
			}
			if (this.isPercent(value)) {
				return (parseFloat(value) / 100) < LIMIT;
			}
			return parseFloat(value /10) < LIMIT;
		},

		/**
         *  是否有 %
         *  @return {boolean} is_percent
         */
		isPercent(value) {
			return /%$/.test(value);
		},
	},
};
</script>
